<template>
  <div class="lativ">
    <van-search placeholder="搜索商品" shape="round" @click="$router.push('/sear')" />
    <!-- 顶部导航栏 -->
    <van-tabs color="#A00000" line-height="1px" @change="changeItem">
      <van-tab :title="item.title" :name="item._id" v-for="(item,index) in cateList" :key="index"></van-tab>
    </van-tabs>
    <!-- 价格排序 -->
    <div class="sort">
      <p>综合</p>
      <p>销量</p>
      <p>新品</p>
      <p @click="changeSort">
        价格
        <van-icon name="arrow-up" v-show="sort==1" />
        <van-icon name="arrow-down" v-show="sort==2" />
      </p>
    </div>
    <!-- 商品列表区域 -->
    <div class="main">
      <div class="item" v-for="(item,index) in searchgood" :key="index">
        <div class="img">
          <img src :data-src="item.pic" />
        </div>
        <p>{{item.title}}</p>
        <div>
          <p class="price">￥{{item.price}}</p>
          <van-icon name="cart-o" size="20" @click="tan(item)"></van-icon>
        </div>
      </div>
      <div class="top" v-show="topShow == true" @click="goTop">
        <van-icon name="arrow-up" size="20" />
      </div>
    </div>
    <van-sku
      v-model="skuShow"
      :sku="sku"
      :goods="goods"
      :custom-stepper-config="customStepperConfig"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      goodList: [],
      sort: 0,
      cid: 0,
      topShow: false,
      skuShow: false, //默认隐藏
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              { id: 1, name: "红色" },
              { id: 2, name: "白色" },
              { id: 3, name: "骚粉色" },
            ],
          },
          {
            k: "尺码",
            k_s: "s1",
            v: [
              { id: 8, name: "L" },
              { id: 9, name: "XL" },
            ],
          },
        ],
        list: [
          {
            id: 1000,
            c1: 1,
            s1: 4,
            price: 300,
            stock_num: 120,
          },
          {
            id: 1000,
            c1: 1,
            s1: 5,
            price: 400,
            stock_num: 120,
          },
          {
            id: 1000,
            c1: 2,
            s1: 4,
            price: 300,
            stock_num: 120,
          },
          {
            id: 1000,
            c1: 2,
            s1: 5,
            price: 300,
            stock_num: 120,
          },
          {
            id: 1000,
            c1: 3,
            s1: 4,
            price: 300,
            stock_num: 120,
          },
          {
            id: 1000,
            c1: 3,
            s1: 5,
            price: 300,
            stock_num: 120,
          },
        ],
        price: 3000,
        stock_num: 100,
      },
      goods: {
        picture: "",
      },
      nums: 0,
      customStepperConfig: {
        handeStepperChange: (currentValue) => {
          this.nums = currentValue;
        },
      },
    };
  },
  computed: {
    searchgood() {
      let data = this.goodList;
      data.sort((a, b) => {
        if (this.sort == 1) {
          return a.price - b.price;
        } else {
          return b.price - a.price;
        }
      });
      //无需过滤直接返回
      if (this.cid == 0) {
        return data;
      }

      data = data.filter((item) => {
        return item.cid == this.cid;
      });
      return data;
    },
  },
  created() {},
  mounted() {
    this.category();
    this.getList();
    this.lazyload();
    // 滚动
    window.addEventListener("scroll", () => {
      let html = document.documentElement || document.body;
      //判断页面滚动的高度，大于可视化窗口的高度
      if (html.scrollTop > html.clientHeight) {
        this.topShow = true;
      } else {
        this.topShow = false;
      }
    });
    window.addEventListener("scroll", this.lazyload);
  },
  methods: {
    //   商品分类
    category() {
      this.$axios({
        url: "/fenlei.json",
      }).then((res) => {
        // console.log(res);
        this.cateList = res.result;
      });
    },
    // 商品列表
    getList() {
      this.$axios({
        url: "/list.json",
      }).then((res) => {
        this.goodList = res.result;
        console.log(res);
      });
    },
    // 切换tab栏的信息
    changeItem(name, title) {
      this.cid = name;
    },
    changeSort() {
      if (this.sort == 0 || this.sort == 2) {
        this.sort = 1;
      } else {
        this.sort = 2;
      }
    },
    goTop() {
      let html = document.documentElement || document.body;
      html.scrollTop = 0;
      //清楚定时器
      // let timer = setInterval(() => {
      //   if (html.scrollTop <= 0) {
      //     clearInterval(timer);
      //   }
      //   html.scrollTop -= 50;
      // }, 10);
    },
    tan(item) {
      this.skuShow = true;
      this.goods.picture = item.pic;
      this.sku.price = item.price;
    },
    //图片懒加载操作
    lazyload() {
      let html = document.documentElement || document.body;
      let imgs = document.getElementsByTagName("img");
      //判断图片的offsetTop > scrollTop + clientHeight
      for (var i = 0; i < imgs.length; i++) {
        if (imgs[i].offsetTop < html.scrollTop + html.clientHeight) {
          imgs[i].src = imgs[i].getAttribute("data-src");
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.lativ {
  width: 100%;
  background: #f8f8f8;
  .top {
    position: fixed;
    padding: 0.2rem;
    background: #f0f0f0;
    border-radius: 50%;
    bottom: 0.88rem;
    right: 0.15rem;
  }
  .sort {
    line-height: 0.88rem;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: #dddddd 1px solid;
    font-size: 0.16rem;
    p {
      width: 15%;
      text-align: center;
    }
    p:nth-of-type(4) {
      color: #a00000;
    }
  }
  .main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 46%;
      margin: 2%;
      background: #fff;
      .img {
        img {
          width: 100%;
          height: 1.5rem;
          border-radius: 0.15rem;
        }
      }
      p {
        line-height: 0.4rem;
        width: 100%;
        font-size: 0.2rem;
        text-indent: 0.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      div:nth-of-type(2) {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.1rem;
        box-sizing: border-box;
        .price {
          color: #ff0000;
        }
      }
    }
  }
}
</style>
